<template>
  <div class="dashboard-editor-container">

    <panel-group @handleSetLineChartData="handleSetLineChartData" />

    <!-- <el-row>
      <line-chart :chart-data="lineChartData1" height="500px" width="100%" />
    </el-row>
    <el-row>
      <line-chart :chart-data="lineChartData2" height="500px" width="100%" />
    </el-row>
    <el-row>
      <line-chart :chart-data="lineChartData3" height="500px" width="100%" />
    </el-row> -->
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <line-chart :chart-data="lineChartData1" height="700px" />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <line-chart :chart-data="lineChartData2" height="700px" />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <line-chart :chart-data="lineChartData3" height="700px" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getNewUser, getPayUser, getIncome } from '@/api/gameuser'
import LineChart from './MixChart'
import PanelGroup from './PanelGroup'

const lineChartData = {
  newVisitis1: {
    xData: ['1', '2', '3', '4', '5', '6', '7'],
    yData: [0, 0, 0, 0, 0, 0, 0],
    tName: '新增玩家数'
  },
  newVisitis2: {
    xData: ['1', '2', '3', '4', '5', '6', '7'],
    yData: [0, 0, 0, 0, 0, 0, 0],
    tName: '付费玩家数'
  },
  newVisitis3: {
    xData: ['1', '2', '3', '4', '5', '6', '7'],
    yData: [0, 0, 0, 0, 0, 0, 0],
    tName: '收入'
  }
}

export default {
  name: 'MixChart',
  components: {
    LineChart,
    PanelGroup
  },
  data() {
    return {
      lineChartData1: lineChartData.newVisitis1,
      lineChartData2: lineChartData.newVisitis2,
      lineChartData3: lineChartData.newVisitis3,
      listQuery: {
        sTime: 0,
        eTime: 0,
        operat: 1
      }
    }
  },
  methods: {
    handleSetLineChartData(sTime, eTime, operat) {
      // this.lineChartData = lineChartData['s']
      this.listQuery.sTime = sTime
      this.listQuery.eTime = eTime
      this.listQuery.operat = operat
      getNewUser(this.listQuery).then(response => {
        var list = response.data.list
        var xdata = []
        var ydata = []
        for (var idx in list) {
          if (operat === 2) {
            xdata.push(list[idx]._id.year + '/' + list[idx]._id.month)
          } else {
            xdata.push(list[idx]._id.year + '/' + list[idx]._id.month + '/' + list[idx]._id.day)
          }
          ydata.push(list[idx].count)
        }
        this.lineChartData1 = {
          xData: xdata,
          yData: ydata,
          tName: '新增玩家数'
        }
      })

      getPayUser(this.listQuery).then(response => {
        var list = response.data.list
        var xdata = []
        var ydata = []
        for (var idx in list) {
          if (operat === 2) {
            xdata.push(list[idx]._id.year + '/' + list[idx]._id.month)
          } else {
            xdata.push(list[idx]._id.year + '/' + list[idx]._id.month + '/' + list[idx]._id.day)
          }
          ydata.push(list[idx].count)
        }
        this.lineChartData2 = {
          xData: xdata,
          yData: ydata,
          tName: '付费玩家数'
        }
      })

      getIncome(this.listQuery).then(response => {
        var list = response.data.list
        var xdata = []
        var ydata = []
        for (var idx in list) {
          if (operat === 2) {
            xdata.push(list[idx]._id.year + '/' + list[idx]._id.month)
          } else {
            xdata.push(list[idx]._id.year + '/' + list[idx]._id.month + '/' + list[idx]._id.day)
          }
          ydata.push(list[idx].count)
        }
        this.lineChartData3 = {
          xData: xdata,
          yData: ydata,
          tName: '收入'
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  height: 800px;
  // padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>

